<template>
	<view>
		<uni-nav-bar statusBar backgroundColor='#3f6efe' color='#fff'>
			<view class="w-100p f-28 flex-c flex-aic">我的报账</view>
		</uni-nav-bar>
		<view class="nav p-l-30 p-r-30 p-b-20 p-t-20">
			<uni-segmented-control :current="type" :values="items" @clickItem="onClickItem" styleType="button"
				activeColor="#dd524d"></uni-segmented-control>
		</view>
		<uniSwipeAcion>
			<uni-transition mode-class="fade" :show="true" v-for="(item,index) in list" :key="index">
				<view class="list bs-b">
					<uniSwipeAcionItem :disabled='type!=0' :right-options="options1" :left-options="options2"
						@click="onClick($event,index,item)">
						<view class="title">
							<uni-tag :text="item.type" type="primary" />
							<text class="f-25" style="color: red;">￥{{item.price}}</text>
						</view>
						<view class="main">
							<view class="desc"><text>创建时间:</text><text>{{item.create_time}}</text></view>
							<view class="desc"><text>使用时间:</text><text>{{item.use_time}}</text></view>
							<view class="images" v-if="item.images.length>0">
								<view class="tit">图片</view>
								<htzImageUpload class='images' :add='false' :value="item.images" :remove='false'></htzImageUpload>
							</view>
							<textShrink :text="'备注：'+item.detail" />
							
							<view v-if="type!==0" style="background-color: #f5f5f5;" class="br-12 m-t-10 m-t-5">
								<view class="images" v-if="item.ac_images.length>0">
									<view class="f-22 p-l-10">打款凭证</view>
									<htzImageUpload class='images' :add='false' :value="item.ac_images" :remove='false'></htzImageUpload>
								</view>
								<view class="desc p-t-15 p-b-15 p-l-10 p-r-20" v-if="item.ac_detail"><textShrink :size='22' :text="'审核备注：'+item.ac_detail" /></view>
							</view>
						</view>
					</uniSwipeAcionItem>
				</view>
			</uni-transition>
		</uniSwipeAcion>
		<pinapp-empty-page v-if="list.length==0"></pinapp-empty-page>

		<block v-if="list.length!=0">
			<view class="p-b-100">
				<uni-load-more :status="status"></uni-load-more>
			</view>
		</block>

		<!-- 悬浮按钮 -->
		<uni-fab v-show='type==0' ref="fab" :content='content' horizontal='right' @trigger='trigger' />
	</view>
</template>

<script>
	import textShrink from '@/components/saber-textShrink/textShrink.vue'
	import htzImageUpload from '@/components/htz-image-upload/htz-image-upload.vue'
	import pinappEmptyPage from "@/components/pinapp-empty-page/pinapp-empty-page.vue"
	import uniSwipeAcion from '@/uni_modules/uni-swipe-action/components/uni-swipe-action/uni-swipe-action'
	import uniSwipeAcionItem from '@/uni_modules/uni-swipe-action/components/uni-swipe-action-item/uni-swipe-action-item'
	export default {
		components: {
			textShrink,
			htzImageUpload,
			pinappEmptyPage,
			uniSwipeAcion,
			uniSwipeAcionItem
		},
		data() {
			return {
				options1: [{
					text: '删除',
					style: {
						backgroundColor: '#dd524d'
					}
				}],
				options2: [{
					text: '编辑',
					style: {
						backgroundColor: '#007aff'
					}
				}],
				type: 0, //切换索引
				items: ['待报销', '已报销', '已驳回'],
				imageStyles: {
					border: {
						radius: '10'
					}
				},
				content: [{
					iconPath: '../../static/images/book.png',
					text: '记一笔'
				}],
				params: {
					page: 1,
					limit: 5,
				},
				list: [],
				total: 0,
				status: 'more'
			}
		},
		created() {
			uni.$on('reload', item => {
				for (let i = 0; i < this.list.length; i++) {
					if (this.list[i].id === item.id) {
						this.$set(this.list, i, item)
						break;
					}
				}
			})

			uni.$on('add', item => {
				this.list.unshift(item)
			})
		},
		onLoad(e) {
			this.getList({
				page: 1,
				limit: 5
			})
		},
		onReachBottom() {
			this.getList(this.params)
		},
		methods: {
			onClick(e, index, item) {
				if (e.position === 'left') {
					uni.navigateTo({
						url: `/pages/reimbursement/reimbursement?id=${item.id}`,
					})
				} else {
					this.$http.post('/reimbursement/delete', {
						id: item.id
					}).then(res => {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
						this.list.splice(index, 1)
					})
				}
			},
			itemEdit(item) {
				console.log()
			},
			onClickItem(e) {
				if (this.type != e.currentIndex) {
					this.list = []
					this.type = e.currentIndex;
					this.getList()
				}
			},
			trigger(e) {
				if (e.index === 0) {
					uni.navigateTo({
						url: '/pages/reimbursement/reimbursement?type=add'
					})
				}
			},
			getList(e) {
				let obj = {}
				if (typeof(e) == 'undefined') {
					obj = {
						page: 1,
						limit: 5
					}
					e = obj
					this.params = obj
					this.list = []
				}
				e = Object.assign(e, obj, {
					type: this.type
				})

				this.status = 'loading'
				this.$http.get('/reimbursement', {
					params: e
				}).then(res => {
					this.list = this.list.concat(res.data)
					this.params.page++
					this.total = res.total
					if (this.list.length >= res.total) {
						this.status = 'no-more'
					} else {
						this.status = 'more'
					}
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: white;
	}
</style>
<style lang="scss" scoped>
	.nav {
		position: sticky;
		top: 0;
		z-index: 999;
		background-color: #fff;
	}

	.list {
		overflow: hidden;
		margin: 50upx 30upx;
		// box-shadow: 0 0 10upx 2upx rgba(0, 0, 0, .1);
		padding: 0 2upx 2upx 2upx;

		.title {
			height: 70upx;
			background-color: #f8f8f8;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 20upx;
		}

		.main {
			background-color: white;
			padding: 25upx;

			.desc {
				line-height: 1.9;
				display: flex;
				justify-content: space-between;
			}

			.images {
				padding: 15upx 0;

				.tit {
					line-height: 2;
				}
			}
		}
	}
	
	.images /deep/ .htz-image-upload-Item{
		width: 120upx;
		height: 120upx;
	}
</style>
